<!DOCTYPE HTML>
<html lang="ko">
<head>
<title>Galaxy Pro! | Product</title>
<meta charset="utf-8">
<meta name="viewport" content="width=360">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="./css/m_gal_tab.css" media="all">
<script type="text/javascript" src="./js/jQuery.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/m_gal_tab.js"></script>
</head>
<body>

<div class="gxm-wp">
	<div class="gxm-head">
		<h1><a href="./m_main.html"><img src="./images/h1_pro.gif" alt="Pro! 태블릿의 기준을 바꾸다" /></a></h1>
		<a href="#" class="call-menu">메뉴 여닫기</a>
		<ul class="gxm-menu">
			<li><a href="./m_product.html"><img src="./images/menu_product.gif" alt="Product" /></a></li>
			<li><a href="./m_event_list.html"><img src="./images/menu_event.gif" alt="Event" /></a></li>
			<li><a href="./m_ambassador.html"><img src="./images/menu_ambassador.gif" alt="Ambassador" /></a></li>
		</ul>
		<h2 class="current"><img src="./images/current_product.png" alt="Product" /></h2>
	</div><!-- // gxm-head -->

	<div class="gxm-body">
		<div class="gxt-ct" id="gxt-content">
			<div class="gxt-prodcut-slider">
				<span class="prev"></span>
				<span class="next"></span>
				<div class="gxt-slider-1 gxt-slider">
					<p class="item">
						<a href="./sm-p900.html" onclick="_UX_product_call(this.href); return false;">
							<span class="img"><img src="./images/sm-p900/thumb_1.png" alt="Galaxy note pro sm-p900" /></span>
						</a>
					</p>
					<p class="item">
						<a href="./sm-t320.html" onclick="_UX_product_call(this.href); return false;">
							<span class="img"><img src="./images/sm-t320/thumb_1.png" alt="Galaxy tab pro sm-t320" /></span>
						</a>
					</p>
					<p class="item">
						<!-- blank item box -->
					</p>
				</div>
			</div>
			<script>
				$('.gxt-slider-1').bxSlider({
					nextSelector: '.gxt-prodcut-slider .next',
					prevSelector: '.gxt-prodcut-slider .prev',
					hideControlOnEnd: true,
					slideWidth: 89,
					minSlides: 1,
					maxSlides: 3,
					slideMargin: 6,
					useCSS: false,
					infiniteLoop: false
				});

				var _UX_selected_item = 0;	// 초기 선택 제품 index
				(function(){
					$('.gxt-prodcut-slider .prev').find('.bx-prev').addClass('disabled');
					$('.gxt-slider-1 .item').eq(_UX_selected_item).addClass('active');
					$('.gxt-slider-1 .item a').bind('click', function(){
						$('.gxt-slider-1 .item').removeClass('active');
						$(this).parent().addClass('active');
						// callback
						_UX_selected_item = $('.gxt-slider-1 .item').index($(this));
						return false;
					});
				})();
			</script>

			<div class="gxt-product-detail">
				<div class="gxt-product-call"></div>
				<script>
					var _UX_product_call = function(url){
						$.ajax({
							url: url,
							dataType: 'html'
						}).done(function( data ) {
							$('.gxt-product-call').empty();
							$('.gxt-product-call').html(data);
							_UX_btnScrollTo();		// anchor 스크롤
						});
						return false;
					};
					

					// anchor 스크롤 function
					var _UX_btnScrollTo = function(){
						$('.scrollTo').bind('click', function(){
							$this = $(this);
							$.scrollTo($this.attr('href'), 300);
							return false;
						});
					};

					// 최초 보여질 제품 ajax 호출
					_UX_product_call('./sm-p900.html');
				</script>
			</div>
		</div>

		<ul class="gxm-foot-link">
			<li><a href="./pop_event_2.html" target="_blank"><img src="./images/foot_link_1.gif" alt="태블릿 통합사이트 오픈기념 이벤트. 프로가 되자!" /></a></li>
		</ul>
	</div><!-- // gxm-body -->

</div><!-- // gxm-wp -->

</body>
</html>